﻿import QtQuick 2.0
import "../../components"

Rectangle {
    id: root

    property color bcgColor: Qt.rgba(224/255, 230/255, 233/255, 1)

    color: bcgColor

    radius: 5*dp


    // 预设 ==========================================================================================
    property real cScale: 1.36    // 画布的宽高比
    property var lenBase: Math.min(canvas.width, canvas.height*cScale)
    property var pipeWidth: lenBase*0.005


    // 绘制信息 =======================================================================================

    property var _barPosi: 0
    property var _barState: 0
    property var _capCranePosi: 0
    property var _capCraneState: 0
    property var _targetCranePosi: 0
    property var _targetCraneState: 0
    property var _targetBottleCapAngle: 0
    property var _targetBottleCapState: 0
    property var _targetBottleBodyState: 0
    property var _clampPosi: 0
    property var _clampState: 0
    property var _feedPortState: 0
    property var _bafflePosi: 0
    property var _baffleState: 0
    property var _radioBarPosi: 0
    property var _capCraneClampState: 0     // 开盖夹爪 0松开 1夹紧
    property var _productBottleState: 0
    property var _pumpAngle: 0
    property var _pumpState: 0              // 0不动 -1向左打液体 1向右打液体
    property var _bulbState: [0, 0, 0, 0]   // -1故障 0正常 1第一次经过 2第二次经过
    property var _blowTargetState: 0             // 0不动 1吹 -1故障
    property var _suckAngle: 0              // 会转的那个吸盘的角度

    property var _bulbNum: 2

    // 和小黄条的对接
    property bool _drawTargetBottle: true


    // 图像
    property string imageBulb_r: "qrc:/picture/animation/bulb_r.png"
    property string imageBulb_g: "qrc:/picture/animation/bulb_g.png"
    property string imageBulb_b: "qrc:/picture/animation/bulb_b.png"
    property string imageBulb_1: "qrc:/picture/animation/bulb_1.png"
    property string imageBulb_o: "qrc:/picture/animation/bulb_o.png"

    property string imageGlasses_top: {
        if(gShiftingMaching === 1)      return "qrc:/picture/animation/Shifting/glasses_top.png"
        else                            return "qrc:/picture/animation/Shifting/glasses_top_2.png"
    }
    property string imageGlasses_bottom: {
        if(gShiftingMaching === 1)      return "qrc:/picture/animation/Shifting/glasses_bottom.png"
        else                            return "qrc:/picture/animation/Shifting/glasses_bottom_2.png"
    }
    property string imageBcg: {
        if(gShiftingMaching === 1){
            if(gHasRadioBar){
                return "qrc:/picture/animation/Shifting/bcg.png"
            }else{
                return "qrc:/picture/animation/Shifting/bcg_noHJ.png"
            }
        }
        else{
            if(gHasRadioBar){
                return "qrc:/picture/animation/Shifting/bcg_2.png"
            }else{
                return "qrc:/picture/animation/Shifting/bcg_2_noHJ.png"
            }
        }
    }
    property string imagePole: {
        return "qrc:/picture/animation/Shifting/pole_0.png"
//        if(_barState === 0)         return "qrc:/picture/animation/Shifting/pole_0.png"
//        else if(_barState === 1)    return "qrc:/picture/animation/Shifting/pole_b.png"
//        else                        return "qrc:/picture/animation/Shifting/pole_r.png"
    }

    property string imageRadioBar_left: "qrc:/picture/animation/Shifting/radioBar_left.png"
    property string imageRadioBar_right: "qrc:/picture/animation/Shifting/radioBar_right.png"

    property string imageTopBar: {
        if(_barState === 0)         return "qrc:/picture/animation/Shifting/bar_0.png"
        else if(_barState === 1)    return "qrc:/picture/animation/Shifting/bar_b.png"
        else                        return "qrc:/picture/animation/Shifting/bar_r.png"
    }
    property string imageCapCrane: {
        if(_capCraneState === 0)       return "qrc:/picture/animation/Shifting/capCrane_0.png"
        else if(_capCraneState === 1)  return "qrc:/picture/animation/Shifting/capCrane_b.png"
        else                           return "qrc:/picture/animation/Shifting/capCrane_r.png"
    }
    property string imageCapCrane_front: {
//        if(_capCraneState === 0)       return "qrc:/picture/animation/Shifting/capCrane_0_front.png"
//        else if(_capCraneState === 1)  return "qrc:/picture/animation/Shifting/capCrane_b_front.png"
//        else                           return "qrc:/picture/animation/Shifting/capCrane_r_front.png"
        return "qrc:/picture/animation/Shifting/capClamp/" + (Math.floor(_targetBottleCapAngle*96)%8+1).toString() + (_capCraneClampState<0.5 ? "_open" : "") + ".png"

    }
    property string imageCapCrane_back: {
        if(_capCraneState === 0)       return "qrc:/picture/animation/Shifting/capCrane_0_back.png"
        else if(_capCraneState === 1)  return "qrc:/picture/animation/Shifting/capCrane_b_back.png"
        else                           return "qrc:/picture/animation/Shifting/capCrane_r_back.png"
    }
    property string imageTargetCrane: {
        if(gShiftingMaching === 1){
            if(_targetCraneState === 0)        return "qrc:/picture/animation/Shifting/targetCrane_0.png"
            else if(_targetCraneState === 1)   return "qrc:/picture/animation/Shifting/targetCrane_b.png"
            else                               return "qrc:/picture/animation/Shifting/targetCrane_r.png"
        }else{
            return "qrc:/picture/animation/Shifting/rotateSucker/" + Math.floor(_suckAngle*10) + ".png"
        }

    }
    property string imageLeftClamp: {
        if(_clampState === 0)        return "qrc:/picture/animation/Shifting/clampLeft_y.png"
        else if(_clampState === 1)   return "qrc:/picture/animation/Shifting/clampLeft_b.png"
        else                         return "qrc:/picture/animation/Shifting/clampLeft_r.png"
    }
    property string imageRightClamp: {
        if(_clampState === 0)        return "qrc:/picture/animation/Shifting/clampRight_y.png"
        else if(_clampState === 1)   return "qrc:/picture/animation/Shifting/clampRight_b.png"
        else                         return "qrc:/picture/animation/Shifting/clampRight_r.png"
    }
    property string imageTargetBottleCap: {
        if(_targetBottleCapState === 0)       return "qrc:/picture/animation/Shifting/targetBottle_cap_0.png"
        else if(_targetBottleCapState === 1)  return "qrc:/picture/animation/Shifting/targetBottle_cap_b.png"
        else                                  return "qrc:/picture/animation/Shifting/targetBottle_cap_r.png"

    }
    property string imageTargetBottleBody: {
        if(_targetBottleBodyState === 0)        return "qrc:/picture/animation/Shifting/targetBottle_body_0.png"
        else if(_targetBottleBodyState === 1)   return "qrc:/picture/animation/Shifting/targetBottle_body_b.png"
        else                                    return "qrc:/picture/animation/Shifting/targetBottle_body_r.png"
    }
    property string imageFeedPort_top: {
        if(_feedPortState === 0)        return "qrc:/picture/animation/Shifting/feedPort_top_0.png"
        else if(_feedPortState === 1)   return "qrc:/picture/animation/Shifting/feedPort_top_b.png"
        else                            return "qrc:/picture/animation/Shifting/feedPort_top_r.png"
    }
    property string imageFeedPort_bottom: {
        if(_feedPortState === 0)        return "qrc:/picture/animation/Shifting/feedPort_bottom_0.png"
        else if(_feedPortState === 1)   return "qrc:/picture/animation/Shifting/feedPort_bottom_b.png"
        else                            return "qrc:/picture/animation/Shifting/feedPort_bottom_r.png"
    }
    property string imageProductBottle: {
        if(_productBottleState === 0)       return "qrc:/picture/animation/Shifting/productBottle_0.png"
        else if(_productBottleState === 1)  return "qrc:/picture/animation/Shifting/productBottle_b.png"
        else                                return "qrc:/picture/animation/Shifting/productBottle_r.png"
    }
    property string imageBaffle: {
        if(_baffleState === 0)              return "qrc:/picture/animation/Shifting/baffle_0.png"
        else if(_baffleState === 1)         return "qrc:/picture/animation/Shifting/baffle_b.png"
        else                                return "qrc:/picture/animation/Shifting/baffle_r.png"
    }
    property string imageSuperPipe: {
        if(_blowTargetState === 0)               return "qrc:/picture/animation/superPipe.png"
        else if(_blowTargetState === 1)          return "qrc:/picture/animation/superPipe_b.png"
        else                                return "qrc:/picture/animation/superPipe_r.png"
    }

    Component.onCompleted: {        // 预加载一下图片
        for(let i = 0; i <= 1; i = i+0.01){
            _targetBottleCapAngle = i
        }
    }


    function startAnimation(){
        timer.start()
    }
    function stopAnimation(){
        timer.stop()
    }

    // 绘制处理 =======================================================================================
    Timer{
        id: timer
        interval: 30
        repeat: true
        onTriggered: {
            if(root.visible){
                updateState()
            }
        }
    }


    // 绘制背景
    function drawBcg(ctx){
        ctx.drawImage(imageBcg, sfPosi.bcg.x*width, sfPosi.bcg.y*height, sfPosi.bcg.width*width, sfPosi.bcg.height*height)
        if(gShiftingMaching === 1) ctx.drawImage(imagePole, sfPosi.bcg.x*width, sfPosi.bcg.y*height, sfPosi.bcg.width*width, sfPosi.bcg.height*height)
    }
    function drawGlasses(ctx){
        ctx.drawImage(imageGlasses_top, sfPosi.bcg.x*width, sfPosi.bcg.y*height, sfPosi.bcg.width*width, sfPosi.bcg.height*height)
        ctx.drawImage(imageGlasses_bottom, sfPosi.bcg.x*width, sfPosi.bcg.y*height, sfPosi.bcg.width*width, sfPosi.bcg.height*height)
    }
    // 绘制上面的那个东西
    function drawTopBar(ctx){
        ctx.drawImage(imageTopBar,  sfPosi.bar.x1*width + (sfPosi.bar.x2-sfPosi.bar.x1)*_barPosi*width,
                                    sfPosi.bar.y*height,
                                    sfPosi.bar.width*width,
                                    sfPosi.bar.height*height)

    }
    // 绘制开盖器
    function drawCapCrane_front(ctx){
        ctx.drawImage(imageCapCrane_front, sfPosi.capCrane.x1*width - 0.5*sfPosi.capCrane.width*width + (sfPosi.capCrane.x2-sfPosi.capCrane.x1)*_barPosi*width,
                                     sfPosi.capCrane.y1*height - sfPosi.capCrane.height*height + (sfPosi.capCrane.y2-sfPosi.capCrane.y1)*_capCranePosi*height,
                                     sfPosi.capCrane.width*width,
                                     sfPosi.capCrane.height*height)
    }
    function drawCapCrane_back(ctx){
//        ctx.drawImage(imageCapCrane_back, sfPosi.capCrane.x1*width - 0.5*sfPosi.capCrane.width*width + (sfPosi.capCrane.x2-sfPosi.capCrane.x1)*_barPosi*width,
//                                     sfPosi.capCrane.y1*height - sfPosi.capCrane.height*height + (sfPosi.capCrane.y2-sfPosi.capCrane.y1)*_capCranePosi*height,
//                                     sfPosi.capCrane.width*width,
//                                     sfPosi.capCrane.height*height)
    }
    // 绘制吸靶器
    function drawTargetCrane(ctx){
        ctx.drawImage(imageTargetCrane,  sfPosi.targetCrane.x1*width + (sfPosi.targetCrane.x2-sfPosi.targetCrane.x1)*_barPosi*width,
                                    sfPosi.targetCrane.y1*height + (sfPosi.targetCrane.y2-sfPosi.targetCrane.y1)*_targetCranePosi*height,
                                    sfPosi.targetCrane.width*width,
                                    sfPosi.targetCrane.height*height)
    }
    // 绘制夹爪
    function drawLeftClamp(ctx){
        ctx.drawImage(imageLeftClamp,  sfPosi.leftClamp.x0*width - 0.5*sfPosi.leftClamp.width*width + (sfPosi.leftClamp.x1-sfPosi.leftClamp.x0)*_clampPosi*width,
                                    sfPosi.leftClamp.y*height,
                                    sfPosi.leftClamp.width*width,
                                    sfPosi.leftClamp.height*height)
    }function drawRightClamp(ctx){
        ctx.drawImage(imageRightClamp,  sfPosi.rightClamp.x0*width - 0.5*sfPosi.rightClamp.width*width + (sfPosi.rightClamp.x1-sfPosi.rightClamp.x0)*_clampPosi*width,
                                    sfPosi.rightClamp.y*height,
                                    sfPosi.rightClamp.width*width,
                                    sfPosi.rightClamp.height*height)
    }
    // 绘制溶靶瓶
    function drawTargetBottleCap(ctx){
        if(_targetBottleCapAngle === 0){     // 盖在罐子上
            ctx.drawImage(imageTargetBottleCap,  sfPosi.targetBottleCap.x*width - 0.5*sfPosi.targetBottleCap.width*width,
                                        sfPosi.targetBottleCap.y*height,
                                        sfPosi.targetBottleCap.width*width,
                                        sfPosi.targetBottleCap.height*height)
        }else{                              // 盖在开盖器上
            ctx.drawImage(imageTargetBottleCap, sfPosi.capCrane.x1*width - 0.5*sfPosi.targetBottleCap.width*width + (sfPosi.capCrane.x2-sfPosi.capCrane.x1)*_barPosi*width,
                                         sfPosi.capCrane.y1*height + (sfPosi.capCrane.y2-sfPosi.capCrane.y1)*_capCranePosi*height - 0.04*height,
                                         sfPosi.targetBottleCap.width*width,
                                         sfPosi.targetBottleCap.height*height)
        }
    }function drawTargetBottleBody(ctx){
        ctx.drawImage(imageTargetBottleBody,  sfPosi.targetBottleBody.x*width - 0.5*sfPosi.targetBottleBody.width*width,
                                    sfPosi.targetBottleBody.y*height,
                                    sfPosi.targetBottleBody.width*width,
                                    sfPosi.targetBottleBody.height*height)
    }
    // 绘制进料口
    function drawFeedPort_top(ctx){
        ctx.drawImage(imageFeedPort_top,  sfPosi.feedPort.x*width - 0.5*sfPosi.feedPort.width*width,
                                    sfPosi.feedPort.y*height,
                                    sfPosi.feedPort.width*width,
                                    sfPosi.feedPort.height*height)
    }
    function drawFeedPort_bottom(ctx){
        ctx.drawImage(imageFeedPort_bottom,  sfPosi.feedPort.x*width - 0.5*sfPosi.feedPort.width*width,
                                    sfPosi.feedPort.y*height,
                                    sfPosi.feedPort.width*width,
                                    sfPosi.feedPort.height*height)
    }
    // 绘制产物瓶
    function drawProductBottle(ctx){

        if(gShiftingMaching === 1)  return   // 机型1的溶靶瓶暂时放到背景里面了

        ctx.drawImage(imageProductBottle,
                                    sfPosi.productBottle.x*width - 0.5*sfPosi.productBottle.width*width,
                                    sfPosi.productBottle.y*height,
                                    sfPosi.productBottle.width*width,
                                    sfPosi.productBottle.height*height)
    }
    // 绘制挡板
    function drawBaffle(ctx){
        ctx.drawImage(imageBaffle,  sfPosi.baffle.x*width - 0.5*sfPosi.baffle.width*width,
                                    sfPosi.baffle.y1*height + (sfPosi.baffle.y2-sfPosi.baffle.y1)*_bafflePosi*height,
                                    sfPosi.baffle.width*width,
                                    sfPosi.baffle.height*height)


    }
     function drawBaffleText(ctx){
//         // 挡板上的字
//         ctx.fillStyle = "#FFFFFF"
//         ctx.font = (19*dp).toString() + "px Verdana"
//         ctx.fillText((_bafflePosi > 0.5 ? " 打开" : "遮挡"),
//                      sfPosi.baffle.x*width - 20*dp,
//                      sfPosi.baffle.y1*height + sfPosi.baffle.height*height + (sfPosi.baffle.y2-sfPosi.baffle.y1)*_bafflePosi*height) - 25*dp
     }

    // 管子
    function drawSuperPipe(ctx){

        ctx.drawImage(imageSuperPipe, sfPosi.superPipe.x * width,
                                      sfPosi.superPipe.y * height,
                                      sfPosi.superPipe.width * width,
                                      sfPosi.superPipe.height * height)
    }
    function drawRadioBar(ctx){

        if(gHasRadioBar === 0)  return

        ctx.drawImage(imageRadioBar_left, sfPosi.radioBar.x * width,
                                          sfPosi.radioBar.y * height,
                                          sfPosi.radioBar.width * width,
                                          sfPosi.radioBar.height * height)
        ctx.drawImage(imageRadioBar_right, sfPosi.radioBarItem.x * width,
                                           ((sfPosi.radioBarItem.y2-sfPosi.radioBarItem.y1)*_radioBarPosi+sfPosi.radioBarItem.y1) * height,
                                           sfPosi.radioBarItem.width * width,
                                           sfPosi.radioBarItem.height * height)
    }

    // 灯泡
    function drawBulb(ctx){
        for(let i = 0; i < _bulbNum; i ++){
            let imgSource = imageBulb_r
            if     (_bulbState[i] === -1)  imgSource = imageBulb_1
            else if(_bulbState[i] === 0)   imgSource = imageBulb_b
            else if(_bulbState[i] === 1)   imgSource = imageBulb_g
            else if(_bulbState[i] === 2)   imgSource = imageBulb_b
            else if(_bulbState[i] === 3)   imgSource = imageBulb_r
            else if(_bulbState[i] === 4)   imgSource = imageBulb_1      // 屏蔽状态
            ctx.drawImage(imgSource, sfPosi.bulbList[i].x*width - sfPosi.bulbList[i].width*0.5*width,
                                     sfPosi.bulbList[i].y*height - sfPosi.bulbList[i].height*0.5*height,
                                     sfPosi.bulbList[i].width*width,
                                     sfPosi.bulbList[i].height*height)
        }
    }
    function drawPPump(ctx){
        if(gShiftingMaching === 2)  return
        ctx.drawImage("qrc:/picture/animation/Shifting/pump.png",
                      sfPosi.bcg.x*width,
                      sfPosi.bcg.y*height,
                      sfPosi.bcg.width*width,
                      sfPosi.bcg.height*height)
    }

    function copyValue(res){
        _barPosi                = res["BarPosi"]
        _barState               = res["BarState"]
        _capCranePosi           = res["CapCranePosi"]
        _capCraneState          = res["CapCraneState"]
        _targetCranePosi        = res["TargetCranePosi"]
        _targetCraneState       = res["TargetCraneState"]
        _targetBottleCapAngle    = res["TargetBottleCapAngle"]
        _targetBottleCapState   = res["TargetBottleCapState"]
        _targetBottleBodyState  = res["TargetBottleBodyState"]
        _clampPosi              = res["ClampPosi"]
        _clampState             = res["ClampState"]
        _feedPortState          = res["FeedPortState"]
        _bafflePosi             = res["BafflePosi"]
        _baffleState            = res["BaffleState"]
        _productBottleState     = res["ProductBottleState"]
        _pumpState              = res["PumpState"]
        _bulbState              = res["BulbState"]
        _blowTargetState        = res["BlowTargetState"]
        _drawTargetBottle       = res["DrawTargetBottle"]
        _capCraneClampState     = res["CapCraneClampState"]
        _radioBarPosi           = res["RadioBarPosi"]
        _suckAngle              = res["SuckAngle"]
    }
    function drawPipe(ctx){

//        if(gShiftingMaching === 2)      return

        ctx.lineWidth = root.pipeWidth
        ctx.lineCap = "round"
        ctx.strokeStyle = "white"
//        console.log("lineWidth:", root.pipeWidth)
        for(let i = 0; i < sfPosi.vertex.length; i ++){
            for(let j = 0; j < i; j ++){
                if(sfPosi.isVertexConnect(i, j)){
                    ctx.beginPath()
//                    console.log("绘制", i, j)
                    let x1 = sfPosi.vertex[i].x*canvas.width
                    let y1 = sfPosi.vertex[i].y*canvas.height
                    let x2 = sfPosi.vertex[j].x*canvas.width
                    let y2 = sfPosi.vertex[j].y*canvas.height

                    ctx.moveTo(x1, y1)
                    ctx.lineTo(x2, y2)
                    ctx.stroke()
                }
            }
        }
    }

    function updateState(){
        let res = CAnimationShifting.requestInfo()
        copyValue(res)
        refresh()
    }

    function refresh(){
        canvas.requestPaint()
    }



    Canvas{
        id: canvas
        anchors.centerIn: parent
        x: 0*dp; y: 20*dp
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = canvas.getContext("2d")
            // 清空画布
            ctx.fillStyle = root.bcgColor
            ctx.fillRect(0, 0, width, height)
            drawBcg(ctx)
            drawSuperPipe(ctx)
            drawFeedPort_bottom(ctx)
            drawBaffle(ctx)
            drawFeedPort_top(ctx)
            if(_drawTargetBottle)  drawTargetBottleBody(ctx)
            drawLeftClamp(ctx)
            drawRightClamp(ctx)
            drawPipe(ctx)
            drawGlasses(ctx)
//            drawCapCrane_back(ctx)
            if(_drawTargetBottle)  drawTargetBottleCap(ctx)
            drawCapCrane_front(ctx)
            drawTopBar(ctx)
            drawProductBottle(ctx)
            drawTargetCrane(ctx)
            drawBulb(ctx)
            drawPPump(ctx)
            drawRadioBar(ctx)
            drawBaffleText(ctx)
        }
    }
    ShiftingCanvasPosition{
        id: sfPosi
    }
    ShiftingCanvasMouseArea{
        id: sfMouseArea
        anchors.fill: parent
    }


    // 蠕动泵的动画作为gif浮在上面了

    CustomAnimatedImage{
        id: gif_running_left
        source: "qrc:/picture/animation/rotate_right.gif"
        playing: visible
        visible: _pumpState === -1
        height: 0.04*parent.height; width: 0.03*parent.width
        y: sfPosi.bcg.y*parent.height + sfPosi.bcg.height*parent.height*0.76 - 0.5*height
        x: sfPosi.bcg.x*parent.width + sfPosi.bcg.width*parent.width*0.836 - 0.5*width
    }
    CustomAnimatedImage{
        id: gif_running_right
        source: "qrc:/picture/animation/rotate_left.gif"
        playing: visible
        visible: _pumpState === 1
        height: 0.04*parent.height; width: 0.03*parent.width
        y: sfPosi.bcg.y*parent.height + sfPosi.bcg.height*parent.height*0.76 - 0.5*height
        x: sfPosi.bcg.x*parent.width + sfPosi.bcg.width*parent.width*0.836 - 0.5*width
    }

    Text{
        text: _bafflePosi > 0.5 ? " 打开" : "遮挡"
        color: "white"
        font.pixelSize: config.fontsize
        x: sfPosi.baffle.x*root.width - 18*dp
        y: sfPosi.baffle.y1*root.height + sfPosi.baffle.height*root.height + (sfPosi.baffle.y2-sfPosi.baffle.y1)*_bafflePosi*root.height - 22*dp
    }

}
